// Daniel Shiffman
// Programming from A to Z, Fall 2014
// https://github.com/shiffman/Programming-from-A-to-Z-F14

// Demonstrates p5 "instance" mode 
// which namespaces a particular sketch

// This is necessary if you want two canvases

// We make a function that takes an object called sketch 
var s1 = function( sketch ) {

  var x = 100; 
  var y = 100;

  // If we want a variable to be accessible outside this function
  // We can attach it to sketch
  sketch.somevar = 50;
  
  // Attach stuff to the sketch object
  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
    y = y + 3;
    if (y > sketch.height) {
      y = 0;
    }
  };
};

var s2 = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    //sketch.noCanvas();
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(100);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
    x = x + 1;
    if (x > sketch.width) {
      x = 0;
    }
  };
};

// Create the p5 instance by passing in teh function
// We don't have to do this, but we can attach all the elements
// generated by the p5 sketch to an existing div
var p51 = new p5(s1, 'adiv');

var p52 = new p5(s2, 'anotherdiv');